<template>
  <div class="ms-list">

    <div>
      <h2 style="text-align:center">请为 {{this.form.itemName}} 填写以下问卷，以方便我司竞价专员更有针对性的为您的项目进行推广！</h2><br>
      <el-form class="form" style="width: 800px; margin: 0 auto" label-width="300px" size="small" :model="form"
               ref="formSurvey">
        <h3>一、企业详情</h3>
        <el-form-item label="项目名称" prop="itemName" :rules="[{required: true, message: '必填'}]">
          <el-input v-model="form.itemName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="公司官方网址" prop="webSite">
          <el-input v-model="form.webSite" clearable>
            <template slot="prepend">Http://</template>
          </el-input>
        </el-form-item>
        <el-form-item label="公司成立时间" prop="regtime">
          <el-input v-model="form.regtime" placeholder="如：2010-12-08" clearable></el-input>
        </el-form-item>
        <el-form-item label="公司旗下品牌" prop="brands">
          <el-input v-model="form.brands"></el-input>
        </el-form-item>
        <el-form-item label="该项目已推广" prop="popularizeTimeSpan">
          <el-input v-model="form.popularizeTimeSpan" placeholder="多长时间" clearable></el-input>
        </el-form-item>
        <el-form-item label="是否有分公司" prop="filiale">
          <el-radio-group v-model="form.filiale">
            <el-radio :label="0">没有</el-radio>
            <el-radio :label="1">有</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="分公司所在城市" prop="filialeCitys">
          <el-input v-model="form.filialeCitys" placeholder="多个请以逗号隔开"></el-input>
        </el-form-item>
        <el-form-item label="对外宣传" prop="cooperantShop">
          <el-input v-model="form.cooperantShop">
            <template slot="prepend">公司目前有</template>
            <template slot="append">家加盟店</template>
          </el-input>
        </el-form-item>
        <el-form-item label="哪些地区的加盟来访及成交比较多？" prop="vitalArea" :rules="[{required: true, message: '必填'}]">
          <el-input v-model="form.vitalArea"></el-input>
        </el-form-item>
        <el-form-item label="项目招商团队" prop="teamPeople" :rules="[{required: true, message: '必填'}]">
          <el-input v-model="form.teamPeople">
            <template slot="prepend">有</template>
            <template slot="append">人</template>
          </el-input>
        </el-form-item>
        <el-form-item label="是否有完善的在线客服部门" prop="onlineService" :rules="[{required: true, message: '必填'}]">
          <el-radio-group v-model="form.onlineService">
            <el-radio :label="0">没有</el-radio>
            <el-radio :label="1">有</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="公司目前的来访百分比大概是" prop="visitingRate">
          <el-input v-model="form.visitingRate" clearable>
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
        <el-form-item label="签单百分比大概是" prop="closeRate">
          <el-input v-model="form.closeRate" clearable>
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
        <h3>二、品牌定位</h3>
        <el-form-item label="项目是做什么的？" prop="productOrientation" :rules="[{required: true, message: '必填'}]">
          <el-input v-model="form.productOrientation" clearable></el-input>
        </el-form-item>
        <el-form-item label="项目有哪些产品系列？" prop="products" :rules="[{required: true, message: '必填'}]">
          <el-input v-model="form.products" clearable></el-input>
        </el-form-item>
        <el-form-item label="加盟商的男女比例" prop="genderRation">
          <el-input v-model="form.genderRation" placeholder="如：6:4" clearable></el-input>
        </el-form-item>
        <el-form-item label="年龄段主要以" prop="ageSegment">
          <el-input v-model="form.ageSegment" placeholder="如：12-20岁，80后，大学生" clearable>
            <template slot="append">为主</template>
          </el-input>
        </el-form-item>
        <el-form-item label="核心竞争优势及主要卖点是什么？（比如免加盟费、赠送装修等）" prop="advantage">
          <el-input v-model="form.advantage" placeholder="多个请以逗号隔开" clearable></el-input>
        </el-form-item>
        <el-form-item label="正在使用的招商页面地址" prop="joinWebSite" :rules="[{required: true, message: '必填'}]">
          <el-input v-model="form.joinWebSite" clearable>
            <template slot="prepend">http://</template>
          </el-input>
        </el-form-item>
        <el-form-item label="投资金额">
          <el-input v-model="form.minInvestment" :rules="[{required: true, message: '必填'}]">
            <template slot="prepend">最低</template>
            <template slot="append">元</template>
          </el-input>
          <el-input v-model="form.maxInvestment">
            <template slot="prepend">最高</template>
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="是否愿意提供更加详细的加盟政策" prop="joinPolicy">
          <el-radio-group v-model="form.joinPolicy">
            <el-radio :label="0">不愿意</el-radio>
            <el-radio :label="1">愿意</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="form.joinPolicy !== undefined" label="更加详细的加盟政策" prop="joinPolicy">
          <el-input v-model="form.joinPolicy" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="公司主要的竞争对手有哪些？" prop="competitor">
          <el-input v-model="form.competitor" placeholder="多个请以逗号隔开"></el-input>
        </el-form-item>
        <el-form-item label="同行业中，正在使用电视广告或者曾经使用过电视广告的有" prop="tvCompetitor">
          <el-input v-model="form.tvCompetitor" placeholder="多个请以逗号隔开"></el-input>
        </el-form-item>
        <h3>三、推广要求</h3>
        <el-form-item label="项目主要推广哪些关键词（类别）？" prop="mainKeywords" :rules="[{required: true, message: '必填'}]">
          <el-input v-model="form.mainKeywords" placeholder="多个请以逗号隔开"></el-input>
        </el-form-item>
        <el-form-item label="重点关键词是否有竞价排名要求？若有，请填写相应关键词" prop="emphasisKeywords">
          <el-input v-model="form.emphasisKeywords" placeholder="多个请以逗号隔开" clearable></el-input>
        </el-form-item>
        <el-form-item label="项目主要推广地域有" prop="mainArea" :rules="[{required: true, message: '必填'}]">
          <el-input v-model="form.mainArea" placeholder="多个请以逗号隔开" clearable></el-input>
        </el-form-item>
        <el-form-item label="不推广（禁止）地域有" prop="notArea">
          <el-input v-model="form.notArea" placeholder="多个请以逗号隔开" clearable></el-input>
        </el-form-item>
        <el-form-item label="项目推广时间段" prop="popularizeTime" :rules="[{required: true, message: '必填'}]">
          <el-input v-model="form.popularizeTime" placeholder="多个请以逗号隔开" clearable></el-input>
        </el-form-item>
        <el-form-item label="项目推广每日预算为" prop="dailyBudget" :rules="[{required: true, message: '必填'}]">
          <el-input v-model="form.dailyBudget" placeholder="3000" clearable>
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="每日需要" prop="dailyMinResource" :rules="[{required: true, message: '必填'}, {min:0 ,max: 125}]">
          <el-input v-model="form.dailyMinResource" placeholder="30" clearable>
            <template slot="append">条</template>
          </el-input>
        </el-form-item>
        <h3>四、对接信息</h3>
        <el-form-item label="对接人" prop="contacts" :rules="[{required: true, message: '必填'}]">
          <el-input v-model="form.contacts" clearable></el-input>
        </el-form-item>
        <el-form-item label="联系手机" prop="mobile" :rules="[{required: true, message: '必填'}]">
          <el-input v-model="form.mobile" clearable></el-input>
        </el-form-item>
        <el-form-item label="联系QQ" prop="qq" :rules="[{required: true, message: '必填'}]">
          <el-input v-model="form.qq" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit()">提交</el-button>
          <el-button @click="resetForm('formSurvey')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>
  import Api from '@/api/customer/items'
  import MsConfirmButton from '@/components/common/ConfirmButton.vue'
  import { FormArgument } from '@/models/customer/item-survey'

  export default {
    components: {
      MsConfirmButton
    },
    data () {
      return {
        form: new FormArgument()
      }
    },
    created () {
      this.form.itemId = this.$route.query.id
      this.form.itemName = this.$route.query.title
    },
    methods: {
      submit () {
        this.$refs['formSurvey'].validate((valid) => {
          if (valid) {
            Api.create({form: this.form}, response => {
              let status = response.status || 0
              let body = response.data || {}
              if (status >= 200 && status <= 204) {
                this.$message.success('提交已完成')
              } else {
                this.$message.error(body.error || '提交失败')
              }
            })
          } else {
            return false
          }
        })
      },
      resetForm (formName) {
        this.$refs[formName].resetFields()
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
